<template>
	<view style="background: #f6f8fe;">
		<!-- #ifdef H5 -->
		<view style="position: fixed;top: 44px;z-index: 1;width: 100%;background-color: #f6f8fe;">
		<!-- #endif -->
		<!-- #ifndef H5 -->
		<view style="position: fixed;top: 0;z-index: 1;width: 100%;background-color: #f6f8fe;">
		<!-- #endif -->
			<uni-search-bar placeholder="请输入流程名称查询" v-model="what" @input="handleSearch"
				@confirm="(e) => handleSearch(e.value)" radius="5" cancelButton="none" bg-color="#fff">
			</uni-search-bar>
		</view>
		<view style="margin-top: 65px;padding-bottom: 30rpx;">
			<view style="margin-bottom: 30rpx;" v-for="(item, index) in list" :key="index">
				<view class="list-title" v-if="item.children.length>0">
					{{item.name || ''}}
				</view>
				<view class="list-cell" v-for="el in item.children" :key="el.code"
					@click="() => handleClickEl(item,el)">
					<view class="address_book_box_left">
						<image src="../static/launch.png" mode=""
							style="width:64rpx;height:64rpx;border-radius: 12rpx;">
						</image>
					</view>
					<view class="address_book_box_right" style="line-height: 2; margin-left:10px">
						{{el.name}}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import {
		postAction
	} from '@/utils/request.js'
	import {
		onLoad,
	} from '@dcloudio/uni-app'
	const url = {
		list: '/flow/getDirTree'
	}
	const list = ref([])
	const oldList = ref([])
	const what = ref('')
	const init = () => {
		postAction(url.list).then(res => {
			const data = res.data || []
			if (data && data.length == 1) {
				list.value = data[0].children || []
				oldList.value = data[0].children || []
			}
		})
	}
	const handleSearch = (value) => {
		what.value = value
		if (what.value) {
			list.value = filterTreeByName(oldList.value, what.value)
		} else {
			list.value = JSON.parse(JSON.stringify(oldList.value))
		}
	}
	const handleClickEl = (item, el) => {
		console.log({
			item,
			el
		})
		let extraParams = el.extraParams || '';
		if (extraParams) {
			let ary = extraParams.split('=');
			extraParams = {[ary[0]] : ary[1]};
		}
		const params = {
			code: el.code,
			extraParams: extraParams || {}
		}
		uni.navigateTo({
			url: `/application/processInit?record=${JSON.stringify(params)}`,
		});
	}
	/**
	 * 根据 name 值过滤树型数据
	 * @param {Array} tree 树型数据
	 * @param {string} name 目标 name 值
	 * @returns {Array} 过滤后的树型数据
	 */
	const filterTreeByName = (tree, name) => {
		return tree
			.map(node => ({
				...node
			})) // 浅拷贝节点，避免修改原数据
			.filter(node => {
				// 检查当前节点是否匹配
				if (node.name.includes(name)) {
					return true; // 匹配，保留该节点
				}

				// 递归过滤子节点
				if (node.children && node.children.length) {
					node.children = filterTreeByName(node.children, name);
					return node.children.length > 0; // 如果子节点有匹配项，保留该节点
				}

				return false; // 不匹配，过滤掉该节点
			});
	}
	onLoad(() => {
		init()
	})
</script>
<style>
	page{
		background: #f6f8fe;
	}
</style>
<style lang="scss" scoped>
	.list-title {  
		box-sizing: border-box;
		padding: 7px 0;
		color: #606266;
		width: 100%;
		font-weight: 600;
		font-size: 16px;
		line-height: 1.2;
		margin: 0 30rpx;
	}

	.list-cell {
		display: flex;
		align-items: center;
		box-sizing: border-box;
		padding: 10px 24rpx;
		overflow: hidden;
		color: #323233;
		font-size: 16px;
		line-height: 24px;
		background-color: #fff;
		margin: 30rpx;
		border-radius: 12rpx;
	}
	
	.address_book_box_left{
		display: flex;
		align-items: center;
	}

	::v-deep .u-sticky {
		background-color: #fff;
	}
</style>